body {
    margin: 0;
    height: 100vh;
    background: lightblue;
    display: grid;
    place-items: center;
}

.tired {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #2b4114 92%, #0000) 78.8% 52.7%/5px 5px,
        radial-gradient(farthest-side, #2b4114 92%, #0000) 62.8% 52.7%/5px 5px,
        radial-gradient(farthest-side, #2b4114 92%, #0000) 49.8% 52.7%/5px 5px,
        radial-gradient(farthest-side, #2b4114 92%, #0000) 33.8% 52.7%/5px 5px,
        radial-gradient(circle 15px at 50% -5px, #0000 70%, #2b4114 74% 98%, #0000) 75% 56%/30px 10px,
        radial-gradient(circle 15px at 50% -5px, #0000 70%, #2b4114 74% 98%, #0000) 40% 56%/30px 10px,
        radial-gradient(farthest-side, #f6e94b 70%, #f8c735 72% 98%, #0000) 75% 50%/30px 30px,
        radial-gradient(farthest-side, #f6e94b 70%, #f8c735 72% 98%, #0000) 40% 50%/30px 30px,
        #f7d758;
    background-repeat: no-repeat;
    position: relative;
    animation: eye 4s linear infinite;
}

.tired:before {
    content: "";
    position: absolute;
    right: 30%;
    top: 80%;
    height: 6px;
    transform: translateY(-3px);
    width: 20px;
    border-radius: 100px;
    background: #000;
    animation: mouth 4s linear infinite;
}

.tired:after {
    content: "Z";
    font-size: 40px;
    font-weight: 900;
    color: #a4946a;
    position: absolute;
    font-family: sans-serif;
    right: 30%;
    top: 65%;
    transform: scale(0.3);
    opacity: 0;
    animation: z 4s linear infinite;
}

@keyframes eye {

    0%,
    50%,
    100% {
        background-position: 78.8% 52.7%, 62.8% 52.7%, 49.8% 52.7%, 33.8% 52.7%, 75% 56%, 40% 56%, 75% 50%, 40% 50%;
    }

    30% {
        background-position: 78.8% 47.7%, 62.8% 47.7%, 49.8% 47.7%, 33.8% 47.7%, 75% 51%, 40% 51%, 75% 45%, 40% 45%;
    }
}

@keyframes mouth {
    0% {
        width: 20px;
        height: 6px;
        transform: translateY(-3px);
        right: 38%;
    }

    20%,
    30% {
        width: 27px;
        height: 6px;
        transform: translateY(-3px);
        right: 35%;
    }

    50% {
        width: 10px;
        height: 10px;
        transform: translateY(-6px);
        right: 37%;
    }

    70%,
    100% {
        width: 20px;
        height: 6px;
        transform: translateY(-3px);
        right: 38%;
    }
}

@keyframes z {

    0%,
    40% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }

    80% {
        transform: translate(50px, -50px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(80px, -80px) scale(1);
        opacity: 0;
    }
}